<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入会员ID" v-model="listQuery.userId">
      </el-input>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>

      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column align="center" width="100px" label="会员ID" prop="disUserId">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="订单号" prop="withdrawNum">
      </el-table-column>

      <el-table-column align="center" width="100px" label="总金额" prop="totalAmount">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="手续费" prop="feeAmount">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="实际到账金额" prop="realAmount">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="申请时间" prop="withdrawTime">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="处理时间" prop="handleTime">
      </el-table-column>

      <el-table-column align="center" min-width="100px" label="提现状态" prop="withdrawStatus" :filters="[{ text: '待审核', value: '0' }, { text: '提现成功', value: '1' }, { text: '审核拒绝', value: '2' }]" :filter-method="filterStatus">
        <template slot-scope="scope">
          <el-tag :type="scope.row.withdrawStatus | statusFilter">{{scope.row.withdrawStatusName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="提现方式" prop="disProType" :filters="[{ text: '支付宝', value: '1' }, { text: '微信', value: '0' }, { text: '银联卡', value: '2' }]" :filter-method="filterType">
        <template slot-scope="scope">
          <div v-if="scope.row.disProType==='0'">
            <el-tag :type="scope.row.disProType | typeFilter">微信</el-tag>
          </div>
          <div v-if="scope.row.disProType==='1'">
            <el-tag :type="scope.row.disProType | typeFilter">支付宝</el-tag>
          </div>
          <div v-if="scope.row.disProType==='2'">
            <el-tag :type="scope.row.disProType | typeFilter">银联卡</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="真实姓名" prop="disProName">
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="提现账户" prop="disProMode">
      </el-table-column>

      <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-if="scope.row.withdrawStatus==='0'" @click="handleUpdate(scope.row)">审核</el-button>
          <!-- <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="会员ID" prop="disUserId">
          <el-input v-model="dataForm.disUserId" disabled></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="totalAmount">
          <el-input v-model="dataForm.totalAmount" disabled></el-input>
        </el-form-item>
        <el-form-item label="手续费" prop="feeAmount">
          <el-input v-model="dataForm.feeAmount" :change="change()"></el-input>
        </el-form-item>
        <el-form-item label="实际到账金额" prop="realAmount">
          <el-input v-model="dataForm.realAmount" disabled></el-input>
        </el-form-item>
        <el-form-item label="提现状态" prop="withdrawStatus">
          <el-select v-model="dataForm.withdrawStatus" placeholder="请选择">
            <el-option label="待审核" value="0">
            </el-option>
            <el-option label="审核通过" value="1">
            </el-option>
            <el-option label="审核拒绝" value="2">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='exc'" type="primary" @click="updateData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import { fetchList, updateRecord } from '@/api/withdraw'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'User',
  directives: {
    waves
  },
  data() {
    var validateFee = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('实际到账金额必须大于0元'))
      }
      callback()
    }
    return {
      list: null,
      total: null,
      status: '123',
      listLoading: true,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建',
        exc: '审核'
      },
      listQuery: {
        page: 1,
        limit: 20,
        username: undefined,
        userId: undefined,
        sort: '+id'
      },
      dataForm: {
        id: undefined,
        disUserId: undefined,
        totalAmount: '',
        feeAmount: 0,
        realAmount: undefined,
        withdrawStatus: undefined
      },
      rules: {
        realAmount: [
          {
            required: true,
            message: '实际到账金额必须大于0元',
            trigger: 'blur'
          },
          { validator: validateFee, trigger: 'blur' }
        ],
        withdrawStatus: [
          { required: true, message: '请选择审核状态', trigger: 'blur' }
        ],
        withdrafeeAmountwStatus: [
          { required: true, message: '手续费不能为空', trigger: 'blur' }
        ]
      },

      downloadLoading: false
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger'
      }
      return statusMap[status]
    },
    typeFilter(status) {
      const statusMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'success'
      }
      return statusMap[status]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        disUserId: undefined,
        totalAmount: '',
        feeAmount: '',
        realAmount: undefined,
        withdrawStatus: undefined
      }
    },
    filterStatus(value, row) {
      return row.withdrawStatus === value
    },
    filterType(value, row) {
      return row.disProType === value
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'exc'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    change() {
      var total = this.dataForm.totalAmount
      var fee = this.dataForm.feeAmount
      this.dataForm.realAmount = total - fee
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateRecord(this.dataForm).then(response => {
            for (const v of this.list) {
              if (v.id === this.dataForm.id) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.dataForm)
                break
              }
            }
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '审批成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
